import React, { Component } from 'react'
import {
  HashRouter as Router,
  Redirect,
  Switch,
  Route,
  NavLink
} from 'react-router-dom'
import routeMap from './routeMap'
import PropTypes from 'prop-types'
import {
  createMuiTheme,
  MuiThemeProvider,
  withStyles
} from '@material-ui/core/styles'
import {
  AppBar,
  Toolbar,
  Hidden,
  CssBaseline,
  Divider,
  Drawer,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  IconButton,
  Typography,
  Icon
} from '@material-ui/core'
import MenuIcon from '@material-ui/icons/Menu'

const routes = () => {
  return routeMap.map((item, index) => {
    return (
      <Route
        key={index}
        path={item.path}
        render={() => {
          document.title = item.name
          return <item.component />
        }}
      />
    )
  })
}

const theme = createMuiTheme({
  typography: {
    useNextVariants: true
  }
})

const drawerWidth = 240

const styles = theme => ({
  root: {
    display: 'flex'
  },
  drawer: {
    [theme.breakpoints.up('sm')]: {
      width: drawerWidth,
      flexShrink: 0
    }
  },
  appBar: {
    marginLeft: drawerWidth,
    [theme.breakpoints.up('sm')]: {
      width: `calc(100% - ${drawerWidth}px)`
    }
  },
  menuButton: {
    marginRight: 20,
    [theme.breakpoints.up('sm')]: {
      display: 'none'
    }
  },
  toolbar: theme.mixins.toolbar,
  drawerPaper: {
    width: drawerWidth
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing.unit * 2
  }
})

const ListItemLink = props => {
  return <ListItem button component={NavLink} {...props} />
}

class RRoute extends Component {
  state = {
    mobileOpen: false
  }

  handleDrawerToggle = () => {
    this.setState(state => ({ mobileOpen: !state.mobileOpen }))
  }

  render() {
    const { classes } = this.props

    const drawer = (
      <div>
        <div className={classes.toolbar} />
        <Divider />
        <List>
          {routeMap.map((item, index) => (
            <ListItemLink
              to={item.path}
              key={index}
              activeClassName="menu-active"
            >
              <ListItemIcon>
                <Icon>{item.meta.icon}</Icon>
              </ListItemIcon>
              <ListItemText primary={item.name} />
            </ListItemLink>
          ))}
        </List>
        <Divider />
      </div>
    )
    return (
      <Router>
        <MuiThemeProvider theme={theme}>
          <div className={classes.root}>
            <CssBaseline />
            <AppBar position="fixed" className={classes.appBar}>
              <Toolbar>
                <IconButton
                  color="inherit"
                  aria-label="Open drawer"
                  onClick={this.handleDrawerToggle}
                  className={classes.menuButton}
                >
                  <MenuIcon />
                </IconButton>
                <Typography variant="h6" color="inherit" noWrap>
                  Tools
                </Typography>
              </Toolbar>
            </AppBar>
            <nav className={classes.drawer}>
              {/* The implementation can be swap with js to avoid SEO duplication of links. */}
              <Hidden smUp implementation="css">
                <Drawer
                  container={this.props.container}
                  variant="temporary"
                  anchor={'left'}
                  open={this.state.mobileOpen}
                  onClose={this.handleDrawerToggle}
                  onClick={this.handleDrawerToggle}
                  classes={{
                    paper: classes.drawerPaper
                  }}
                  ModalProps={{
                    keepMounted: true // Better open performance on mobile.
                  }}
                >
                  {drawer}
                </Drawer>
              </Hidden>
              <Hidden xsDown implementation="css">
                <Drawer
                  classes={{
                    paper: classes.drawerPaper
                  }}
                  variant="permanent"
                  open
                >
                  {drawer}
                </Drawer>
              </Hidden>
            </nav>
            <main className={classes.content}>
              <div className={classes.toolbar} />
              <Switch>
                <Redirect exact strict from="/" to="/Qrcode" />
                {routes()}
                <Route
                  render={() => <h2 className="container">页面走丢啦!</h2>}
                />
              </Switch>
            </main>
          </div>
        </MuiThemeProvider>
      </Router>
    )
  }
}

RRoute.propTypes = {
  classes: PropTypes.object.isRequired
}

export default withStyles(styles)(RRoute)
